<template>
  <div>
    <template v-for="(item) in menu">
      <el-menu-item :index="item.value" v-if="!item.children">
        {{item.name}}
      </el-menu-item>
      <el-submenu :index="item.value" v-else-if="item.children">
        <template slot="title">{{item.name}}</template>
        <el-menu-item v-if="!item.children" :index="item.value" v-for="item in item.children">{{item.name}}</el-menu-item>
        <el-submenu v-else :index="item.value" >
          <template slot="title">{{item.name}}</template>

          <template v-for="_item in item.children">
            <el-menu-item v-if="!_item.children"  :index="_item.value" > {{_item.name}}</el-menu-item>

            <item v-else :menu="_item.children"></item>
          </template>
        </el-submenu>

      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: "item",
  props:{
    menu:{
      type : Array
    }
  }
}
</script>

<style scoped>

</style>